<template>
	<view class="order">
		<view class="header">
			<h1>订单信息</h1>
			<p>消费订单：0   总消费：￥0.00</p>
		</view>
		<view class="tabs">
			<view class="item" :class="{active:current==1 ? true : false}" @click="chooseClick(1)">
				<span>待付款</span>
				<span>0</span>
			</view>
			<view class="item" :class="{active:current==2 ? true : false}" @click="chooseClick(2)">
				<span>待发货</span>
				<span>0</span>
			</view>
			<view class="item" :class="{active:current==3 ? true : false}" @click="chooseClick(3)">
				<span>待收货</span>
				<span>0</span>
			</view>
			<view class="item" :class="{active:current==4 ? true : false}" @click="chooseClick(4)">
				<span>待评价</span>
				<span>0</span>
			</view>
			<view class="item" :class="{active:current==5 ? true : false}" @click="chooseClick(5)">
				<span>已完成</span>
				<span>0</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:1,
			}
		},
		onLoad(options) {
			if(options.type==0 || !options.type){
				this.current=1
			}else{
				this.current=options.type;
			}
		},
		methods: {
			chooseClick(type){
				this.current=type
			},
		}
	}
</script>

<style lang="scss" scoped>
.tabs{
	display:flex;
	align-items:center;
	background-color:#ffffff;
	justify-content:space-between;
	border-bottom:1px solid #f0f0f0;
	.active{
		border-bottom:1px solid #ff0000;
		color:#ff0000;
	}
	.item{
		width:20%;
		text-align:center;
		padding:13px;
		span{
			font-size:16px;
		}
	}
}
.order{
	height:100vh;
	background-color:#f5f5f5;
	.header{
		height:130px;
		background-color:#e93323;
		color:#ffffff;
		line-height:15px;
		h1{
			font-size:25px;
			padding:30px 20px;
		}
		p{
			padding:0 20px;
		}
	}
}
</style>
